{% extends "base.html" %}
{% block title %}类型年份分析{% endblock %}
{% block stylecontent %}
<link href="/static/css/styles.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
{% endblock %}
{% block content %}
<div class="container-fluid px-4">
    <ol class="breadcrumb mb-4">
        <li class="breadcrumb-item active">类型年份分析</li>
    </ol>

    <!-- 搜索框（类似搜索路由） -->
    <form method="post" action="{{ url_for('type_year_analysis', typeId=0) }}" class="mb-3">
        <div class="input-group">
            <input
                type="text"
                class="form-control"
                name="search_type"
                placeholder="搜索电影类型（如剧情、喜剧）"
                value="{{ target_type if target_type != '全部类型' else '' }}"
            >
            <button class="btn btn-primary" type="submit">搜索</button>
        </div>
    </form>

    <!-- 类型快速选择（可选） -->
    <div class="mb-3">
        <span class="text-muted">快速选择：</span>
        {% for type_id, type_name in indexed_types %}  <!-- 遍历带索引的列表 -->
        <a href="{{ url_for('type_year_analysis', typeId=type_id) }}" class="btn btn-sm btn-outline-secondary me-2">
            {{ type_name }}
        </a>
        {% endfor %}
    </div>
    <!-- 图表展示 -->
    <div class="card mb-4">
        <div class="card-header">
            <i class="fas fa-chart-line me-1"></i>
            {{ target_type }}历年数量统计
        </div>
        <div class="card-body" id="type_year_chart" style="height: 400px;"></div>
    </div>
</div>
{% endblock %}
{% block scriptcontent %}
<script>
    // 初始化图表
    var chart = echarts.init(document.getElementById('type_year_chart'));

    var option = {
        title: {
            text: '{{ target_type }}历年数量统计'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            }
        },
        xAxis: {
            type: 'category',
            data: {{ years|safe }}
        },
        yAxis: {
            type: 'value',
            name: '数量'
        },
        series: [{
            name: '电影数量',
            type: 'bar',
            data: {{ counts|safe }},
            itemStyle: {
                color: '#5470c6'
            }
        }]
    };

    chart.setOption(option);
    window.addEventListener('resize', () => chart.resize());
</script>
{% endblock %}